<template>
    <div class="search">
        <div class="input">
            <input type="text" placeholder="搜索商品">
        </div>
        <div class="num">
            <router-link to="/kefu">
                <img src="./对话 (4).png" alt="">
            </router-link>
        </div>
    </div>
</template>

<script lang="ts" setup>

</script>
<style scoped lang="less">
* {
    box-sizing: border-box;
}

.search {
    font-size: 30rem;
    display: flex;
    justify-content: space-between;
    padding: 20rem 50rem 20rem 26rem;
    align-items: center;

    .input {
        position: relative;

        &::before {
            content: '';
            position: absolute;
            top: 17rem;
            left: 20rem;
            z-index: 10;
            width: 28rem;
            height: 28rem;
            background: url('./搜索 (1).png') 0 0/28rem 28rem no-repeat;
            pointer-events: none;

        }

        input {
            width: 606rem;
            height: 60rem;
            background: #FFFFFF;
            border-radius: 30rem;
            border: none;
            outline: none;
            font-weight: 400;
            font-size: 28rem;
            color: #999999;
            padding: 0 20rem 0 63rem;

            &::placeholder {
                font-weight: 400;
                font-size: 28rem;
                color: #333;
            }
        }
    }

    .num {
        img {
            width: 38rem;
            height: 38rem;
            object-fit: contain;
            object-position: center;
        }
    }
}
</style>